
<template>
  <div class='container'>
    <el-card style="margin:10px">
      <!-- 顶部搜索 -->
      <el-row type="flex" justify="space-between">
        <el-col>
          <el-form>
            <el-form-item label="关键字" label-width="80px">
              <el-input style="width:50%" placeholder="根据编号搜索"
                v-model="page.keyword" />
            </el-form-item>
          </el-form>
        </el-col>
        <el-col>
          <el-row type="flex" justify="end">
            <el-button size="small" @click="btnClear">清除</el-button>
            <el-button size="small" type="primary" @click="btnSearch">搜索
            </el-button>
          </el-row>
        </el-col>
      </el-row>
      <!-- //顶部搜索 -->

      <!-- 提示 -->
      <el-card class="tipCard">
        <i class="el-icon-info" style="padding-right:8px"></i>
        <span class="tip">数据一共{{page.total}}条</span>
      </el-card>
      <!-- 提示 -->

      <!-- 表格和分页 -->
      <el-table :data="randomsList">
        <el-table-column label="编号" width="220" prop="id"></el-table-column>
        <el-table-column label="题型" width="80" prop="questionType"
          :formatter="questionType">
        </el-table-column>
        <el-table-column label="题目编号" width="220" prop="questionIDs">
          <template slot-scope="scope">
            <!-- ViewTitle查看题目 -->
            <a href="javascript:void(0);"
              v-for="(item, index) in scope.row.questionIDs" :key="index"
              @click="ViewTitle(item.id)" style="color: rgb(0, 153, 255);">
              {{item.number}}
              <br /></a>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="180" prop="addTime">
        </el-table-column>
        <el-table-column label="答题时间(s)" prop="totalSeconds"></el-table-column>
        <el-table-column label="正确率(%)" prop="accuracyRate"></el-table-column>
        <el-table-column label="录入人" prop="userName"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button type="danger" icon="el-icon-delete" circle
              @click="delrandoms(row.id)" class="delIcon" title="删除">
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end" align="middle" style="height: 60px">
        <el-pagination layout=" prev, pager, next, sizes,jumper" background
          :page-sizes="[20,30,50,100]" :page-size="page.pagesize"
          :current-page="page.page" :total="page.total"
          @current-change='changePage' @size-change='handleSizeChange'>
        </el-pagination>
      </el-row>
      <!-- 表格 -->
    </el-card>
    <!-- //弹层组件 -->
    <questions-preview :showDialog.sync='showDialog' ref="mychild" />
  </div>

</template>

<script>
// 引入组题列表的api
import { randoms, removeRandoms } from '@/api/hmmm/questions'
import QuestionsPreview from '@/module-hmmm/components/questions-preview'
// 格式化题型对应
import { questionType } from '@/api/hmmm/constants'
export default {
  // 组件名称   组题列表
  name: 'randomsList',
  // 局部注册的组件
  components: {
    QuestionsPreview
  },
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
    return {
      // 接收的列表数据
      randomsList: [],
      page: {
        // 当前的页码值
        page: 1,
        // 一页所显示的数量
        pagesize: 20,
        // 总数
        total: null,
        // 搜索关键字
        keyword: ''
      },
      // 定义弹层的显示与隐藏
      showDialog: false
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () {
    this.getRandoms()
    // console.log(1)
  },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () { },
  // 组件方法
  methods: {
    // 页码值改变的时候
    changePage (newPage) {
      this.page.page = newPage
      this.getRandoms()
    },
    // 当前页所显示的数量变化
    handleSizeChange (val) {
      // alert('1')
      this.page.pagesize = val
      this.getRandoms()
    },
    // 初始化请求组题列表的方法
    async getRandoms () {
      const data = await randoms(this.page)
      // alert('1')
      this.randomsList = data.data.items
      // console.log(data.data.counts)
      this.page.total = data.data.counts
    },
    // 格式化题型的方法
    questionType (row, column, cellvalue, index) {
      // cellValue是单元格内数据
      const obj = questionType.find(item => item.value.toString() === cellvalue)
      // console.log(obj.label)
      return obj ? obj.label : '未知'
    },

    // 点击删除按钮
    async delrandoms (id) {
      try {
        await this.$confirm('确认删除么?')
        // console.log(id)
        await removeRandoms({ id: id })
        this.getRandoms()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },

    // 点击搜索按钮
    async btnSearch () {
      await this.getRandoms()
    },
    // 点击清空按钮
    async btnClear () {
      // 清空输入框内容
      this.page = {
        // 当前的页码值
        page: 1,
        // 一页所显示的数量
        pagesize: 20,
        // 总数
        total: null,
        // 搜索关键字
        keyword: ''
      }
      // 重新拉去数据
      await this.getRandoms()
      //
    },
    // 点击题目编号
    ViewTitle (id) {
      // 显示弹层
      this.showDialog = true
      // console.log(id)
      this.$refs.mychild.detail(id)
    }
  }
}
</script>
<style  >
.tipCard {
  margin-bottom: 15px;
  border-radius: 5px;
}
.tipCard .el-card__body {
  padding: 8px 16px;
  font-size: 13px;
  color: #909399;
  background-color: #f4f4f5;
}
.delIcon {
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fbc4c4;
}
</style>
